<template>
   <div class="slide" @mouseover="clearInv" @mouseout="runInv">
       <!--通过使用setTimeout()与setInterval()进行循环,替换for的形式 -->
     <div class="slide-wrapper">
       <a class="img-header">
           <transition name="slide-trans">
              <img v-if="isShow" :src="slides[nowIndex].src" />
           </transition>
           <!--若不设置slide-trans-old 图片左右滚动有很大的间隙  -->
           <transition name="slide-trans-old">
              <img v-if="!isShow" :src="slides[nowIndex].src" />
           </transition>
       </a>
       <h2  class="title">{{slides[nowIndex].title}}</h2>
       <ul class="slide-pages">
         <li @click="goto(prevIndex)">&lt;</li>
         <!--index+1下标而不是index -->
         <li @click="goto(index)"  v-for="(item,index) in slides" :key="index"><a :class="{'on':index === nowIndex}">{{index + 1}}</a></li>  
         <li @click="goto(nextIndex)">&gt;</li>
       </ul>
     </div> 
   </div> 
</template>

<script>
export default {
    props:{
      slides: {
        type:Array,
        default:[]
      }
    },
    data() {
     return {
       nowIndex:0,
       isShow:true 
     };
    },
    computed: {
      //上一个
      prevIndex() {
          if(this.nowIndex === 0){
              return this.slides.length - 1;
          }else {
              return this.nowIndex - 1;
          }
      },

      //下一个
      nextIndex() {
          if(this.nowIndex === this.slides.length - 1){ //数组的长度进行计算 this.slides.length - 1
            return 0;
          }else {
            return this.nowIndex + 1;
          }
      },
    },
    methods: {
      goto(index){
        this.isShow = false; //核心new图片进入，old图片离开 
        setTimeout(() => {
            console.log('setTimeout中执行的index   ' + index);
            this.isShow = !this.isShow;
            this.nowIndex = index;
        }, 10); 
      },

      runInv() {
         //初始化 & 改变下标index的值
         this.invId = setInterval(() =>{
            console.log('setInterval中执行的nowIndex   ' + this.nextIndex);
            this.goto(this.nextIndex);//自主执行下一个幻灯片 计算属性this.nextIndex方法
         },2000)
         console.log('this.invId    ' + this.invId);
      },
      clearInv() {
         clearInterval(this.invId); 
      }  
    },
    mounted() {
       //初始化
       this.runInv(); 
    }
}
</script>


<style>
.slide {position:relative;margin:15px 15px 15px 0; width: 100%;height: 506px;overflow: hidden;}
/* 若不设置img的样式 图片左右滚动有很大的间隙    */
.img-header img {position: absolute;top: 0;width: 100%;} 
.slide-wrapper {width: 100%;height: 506px;}
.slide-trans-enter-active {transition: all .5s;}
.slide-trans-enter {transform: translateX(900px);}
.slide-trans-old-leave-active {transition: all .5s;}
.slide-trans-old-leave-to {transform: translateX(-900px);}
.title {position:absolute;width:100%;height:100%;color:#fff;background:#000;opacity:.5;bottom:0;height:30px;text-align:left;padding-left:15px}
.slide-pages{position:absolute;bottom:10px;right:15px}
.slide-pages li{display:inline-block;padding:0 10px;cursor:pointer;color:#fff}
.slide-pages li .on{text-decoration:underline}
</style>

